import React from 'react';
import {Link} from 'react-router-dom';
import {Table, Divider, Popover, Popconfirm, Pagination} from 'antd';
import classnames from 'classnames';
import cssModules from 'react-css-modules';
import styles from './style.less';
import {random6} from '../../util/tool.js';
import {inject, observer} from 'mobx-react';

@inject('OpeningRecordStore')
@observer
@cssModules(styles)
class DataTable extends React.Component {
  constructor(props) {
    super(props);
    this.store = this.props.OpeningRecordStore;
  }
  onChange = pageNumber => {
    const {tableParams, getDoorRecordInfo} = this.store;
    let params = {
      ...tableParams,
      pageNo: pageNumber,
    };
    getDoorRecordInfo(params);
  };
  onShowSizeChange = (current, pageSize) => {
    const {tableParams, getDoorRecordInfo} = this.store;
    let params = {
      ...tableParams,
      pageNo: current,
      pageSize: pageSize,
    };
    getDoorRecordInfo(params);
  };
  createColumns() {
    const columns = [
      {
        title: '开门方式',
        dataIndex: 'typeId',
        align: 'center',
        render: text => {
          let obj = {
            1: '人脸开门',
            2: '卡片开门',
            3: '密码开门',
          };

          return <span>{obj[text]}</span>;
        },
      },
      {
        title: '开门位置',
        dataIndex: 'recordLocation',
        align: 'center',
      },
      {
        title: '识别时间',
        dataIndex: 'recordTime',
        align: 'center',
      },
      {
        title: '姓名',
        dataIndex: 'name',
        align: 'center',
      },
      {
        title: '用户类型',
        dataIndex: 'userType',
        align: 'center',
        render: text => {
          let obj = {
            0: '陌生人',
            1: '业主',
            2: '租户',
            3: '家属',
            4: '亲友',
            5: '保洁员',
            6: '物管员',
            7: '维修员',
            8: '保洁员',
          };

          return <span>{obj[text]}</span>;
        },
      },
      {
        title: '卡号',
        dataIndex: 'cardNumber',
        align: 'center',
      },
      {
        title: '抓拍照片',
        dataIndex: 'recordPhoto',
        align: 'center',
        render: text => {
          return (
            <img
              className={styles['user-photo']}
              src={text ? text : require('image/user-photo.png')}
            />
          );
        },
      },
      {
        title: '底库照片',
        dataIndex: 'photoName',
        align: 'center',
        render: text => {
          return (
            <img
              className={styles['user-photo']}
              src={text ? text : require('image/user-photo.png')}
            />
          );
        },
      },
    ];

    return columns;
  }

  render() {
    const {tableData, loading} = this.store;
    let scope = this;
    return (
      <Table
        styleName={'table-wrap'}
        columns={this.createColumns()}
        dataSource={tableData.data}
        loading={loading}
        pagination={{
          total: tableData.total || 0,
          pageSize: parseInt(tableData.pageSize),
          current: parseInt(tableData.pageNo),
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal: total => {
            return `共 ${total} 条`;
          },
          onChange: this.onChange,
          onShowSizeChange: this.onShowSizeChange,
        }}
        rowKey={(record, index) => {
          return `${random6()}${index}`;
        }}
      />
    );
  }
}

export default DataTable;
